<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colors</title>
  <style>
    canvas{
      border: 1px solid gray;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="500" height="800">您的浏览器不支持Canvas！</canvas>
</body>
<script>
  const canvas = document.getElementById("canvas");
  // 获取上下文以及绘画功能
  const ctx = canvas.getContext("2d");
  // 色板
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
  // 泡泡
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';
      ctx.beginPath();
      ctx.arc(12.5+j*25,200+i*25,10,0,Math.PI*2,true);
      ctx.stroke();
    }
  }

  // 画背景
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,400,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,400,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,475,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,475,75,75);
  ctx.fillStyle = '#FFF';

  // 设置透明度值
  ctx.globalAlpha = 0.2;

  // 画半透明圆
  for (var i=0;i<7;i++){
    ctx.beginPath();
    ctx.arc(75,475,10+10*i,0,Math.PI*2,true);
    ctx.fill();
  }

  ctx.globalAlpha = 1.0;
  // 画背景
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,600,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,637.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,675,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,712.5,150,37.5);

  // 画半透明矩形
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,605+j*37.5,14,27.5)
    }
  }
</script>
</html>